<html>
<head>
  <title>Column Layout</title>
  
  	<title>Complex Layout</title>
		<link rel="stylesheet" type="text/css"
			href="resources/styles/ext-all.css" />
			
			<link href="../resources/styles/ext-all.css" rel="stylesheet" type="text/css"/>
			<link href="../resources/styles/screen.css" rel="stylesheet" type="text/css" />


		<script type="text/javascript" src="./resources/scripts/ext-base.js"></script>
		<script type="text/javascript" src="./resources/scripts/ext-all.js"></script>
		<script type="text/javascript"
			src="./resources/scripts/ext-lang-zh_CN.js"></script>
		<script type="text/javascript" src="./resources/scripts/examples.js"></script>
  
  
  
	<style type="text/css">
	html, body {
        font:normal 12px verdana;
        margin:0;
        padding:0;
        border:0 none;
        overflow:hidden;
        height:100%;
    }
	.x-panel-body p {
	    margin:5px;
	}
    .x-column-layout-ct .x-panel {
        margin-bottom:5px;
    }
    .x-column-layout-ct .x-panel-dd-spacer {
        margin-bottom:5px;
    }
    .settings {
        background-image:url(../shared/icons/fam/folder_wrench.png) !important;
    }
    .nav {
        background-image:url(../shared/icons/fam/folder_go.png) !important;
    }
    </style>
    
    <script type="text/javascript">//tree
	Ext.BLANK_IMAGE_URL='resources/images/default/s.gif';
	Ext.onReady(function(){
    // shorthand
   var Tree = Ext.tree;
        var root=new Tree.TreeNode({
               id:'id',
               text:'Root',
               draggable:false //��������ק
                                      //icon:'im2.gif',//�Զ���ڵ�ͼ��

        });
        var node1=new Tree.TreeNode({
        	id:'1',
        	text:'node1'
        	});
        	
        var node2=new Tree.TreeNode({
        	id:'2',
        	text:'node2'
        	});
        //����г�t�ӵ�Ҷ��   // hrefTarget:'_blank'   �´��ڴ�t��   hrefTarget:"mainFrame",


     var node11=new Tree.TreeNode(
     	{id:'11', 
     	 href:"./project/customer.html",
     	 hrefTarget:"fmain",
     	 text:'link',
     	 leaf:false}
     	 ); 
     
   //  <a href="#"  onclick="javascript:openf('./project/customer.html');return true;">
       node1.appendChild(node11);//���һ��Ҷ��
       var node21=new Tree.TreeNode(
       	{id:'21',
       	 href:"./project/customer.html",
     	 hrefTarget:"fmain",
       	text:'�������',
       	leaf:false}
       	);
       	
       var node22=new Tree.TreeNode(
       {id:'22',
       text:'node22',
       leaf:true}
       );
       
        var node4=new Tree.AsyncTreeNode({
               id:'4',
               text:'node4',
               leaf:false,
               loader:new Tree.TreeLoader({dataUrl:'tree.txt'})
               });
               
        node2.appendChild(
        	[
        	node21,
        	node22
        	]);
        	
        root.appendChild([node1,node2,node4]);
        var treePanel=new Tree.TreePanel({
                 el:'sidebar',
                 useArrows:false,
                 autoScroll:true,
                 animate:true,
                 enableDD:true,
                //�Ƿ���ʾ��ڵ� rootVisible:false,
                 containerScroll: true});
        treePanel.setRootNode(root);
        treePanel.render();
        root.expand();
});
   </script>
    
	<script type="text/javascript">
 
  Ext.onReady(function(){
    
     
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
            // create instance immediately
            new Ext.BoxComponent({
                region: 'north',
                height: 32, // give north and south regions a height
                autoEl: {
                    tag: 'div',
                    html:'<p>north - generally for menus, toolbars and/or advertisements</p>'
                }
            }), {
                // lazily created panel (xtype:'panel' is default)
                region: 'south',
                contentEl: 'south',
                split: true,
                height: 100,
                minSize: 100,
                maxSize: 200,
                collapsible: true,
                title: 'South',
                margins: '0 0 0 0'
            }, {
                region: 'east',
                title: 'East Side',
                collapsible: true,
                split: true,
                width: 225, // give east and west regions a width
                minSize: 175,
                maxSize: 400,
                margins: '0 5 0 0',
                layout: 'fit', // specify layout manager for items
                items:            // this TabPanel is wrapped by another Panel so the title will be applied
                new Ext.TabPanel({
                    border: false, // already wrapped so don't add another border
                    activeTab: 1, // second tab initially active
                    tabPosition: 'bottom',
                    items: [{
                        html: '<p>A TabPanel component can be a region.</p>',
                        title: 'A Tab',
                        autoScroll: true
                    }, new Ext.grid.PropertyGrid({
                        title: 'Property Grid',
                        closable: true,
                        source: {
                            "(name)": "Properties Grid",
                            "grouping": false,
                            "autoFitColumns": true,
                            "productionQuality": false,
                            "created": new Date(Date.parse('10/15/2006')),
                            "tested": false,
                            "version": 0.01,
                            "borderWidth": 1
                        }
                    })]
                })
            }, {
                region: 'west',
                id: 'west-panel', // see Ext.getCmp() below
                title: 'West',
                split: true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins: '0 0 0 5',
                layout: {
                    type: 'accordion',
                    animate: true
                }
                , items: [{
                contentEl: 'west',
                TreePanel:'treePanel'
                
                }]
         //       , items: [{}]
            },
            // in this instance the TabPanel is not wrapped by another panel
            // since no title is needed, this Panel is added directly
            // as a Container
            new Ext.TabPanel({
                //region: 'center', // a center region is ALWAYS required for border layout
                deferredRender: false,
                activeTab: 0,     // first tab initially active
                items: [{
                    contentEl: 'center1',
                    title: 'Close Me',
                    closable: true,
                    autoScroll: true
                }, {
                    contentEl: 'center2',
                    title: 'Center Panel',
                    autoScroll: true
                }]
            })]
        });
        // get a reference to the HTML element with id "hideit" and add a click listener to it 
        Ext.get("hideit").on('click', function(){
            // get a reference to the Panel that was created with id = 'west-panel' 
            var w = Ext.getCmp('west-panel');
            // expand or collapse that Panel based on its collapsed property state
            w.collapsed ? w.expand() : w.collapse();
        });
    });
    </script>


</head>
<body>
 <div id="west" class="x-hide-display">
        <p>Hi. I'm the west panel.</p>
 <div id="sidebar" style="overflow:auto; height:100%;width:280px; solid #c3daf9;"></div>
    </div>
    <div id="center2" class="x-hide-display">
        <a id="hideit" href="#">Toggle the west region</a>
        <p>My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>
         </div>
    <div id="center1" class="x-hide-display">
        <p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
     </div>
    <div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">
    </div>
    <div id="south" class="x-hide-display">
        <p>south - generally for informational stuff, also could be for status bar</p>
    </div>

  </body>
</html>
